<!--
* description:权益查询页面
* author:ss
* createdDate: 2021-1-25
-->
<template>
  <div>
    <div class="filter-container filter-title" />
    <div class="app-container app-container-table">
      <el-dialog
        v-dialogDrag
        :visible.sync="popupsVisible"
        width="75%"
        :append-to-body="true"
        :close-on-click-modal="false"
        @close="closeEdit"
      >
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-toggle-param="true"
        />
        <edit
          v-if="editPopupsVisible"
          :key="editPopupsKey"
          :popups-visible="editPopupsVisible"
          :data-for-form="editRowData"
          :popups-state="editPopupsState"
          :title-name="titleName"
          @close="close"
          @save="save"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/vesalesapi.js'
import OneTableTemplate from '@/components/templates/oneTable'
import { exportExcel } from '@/utils/getTimeString'
import edit from './edit'
import Vue from 'vue'
export default {
  name: 'CustomerInformation',
  components: {
    OneTableTemplate,
    // Edit: () => import('./edit')
    edit
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      [to.path, 'supplierMessage-edit'],
      () => {
        next()
      }
    )
  },
  props: {
    popupsVisible: { type: Boolean, default: false }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      titleName: '',
      editRowData: {},
      editPopupsState: '',
      editPopupsVisible: false,
      // 网格查询API配置对象
      apiConfig: orgApis.orderinvoiceQuery,
      // 动态组件-按钮
      tableButtons: [
        //     {
        //   compKey: 'btnKey5',
        //   type: '',
        //   size: 'small',
        // clickEvent: this.add,
        //   text: '预约容量设置', // err
        //   name: 'add',
        //   position: 'right'
        // },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: '选择', // 查询
          name: '', // 按钮图标样式
          position: 'right',
          fuzzySearch: true
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件

            {
              compKey: 'compKey1',
              labelName: '车牌号：',
              codeField: 'storeCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey11',
              labelName: 'VIN码：',
              codeField: 'invoiceDate',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: true,
              isMust: true
            },
            {
              compKey: 'compKey1',
              labelName: '车主姓名：',
              codeField: 'storeCode',
              component: () => import('@/components/org/commonSelect'),
              type: 'inputText',
              isMust: true
            },
            {
              compKey: 'compKey11',
              labelName: '可用积分：',
              codeField: 'invoiceDate',
              component: () => import('@/components/org/commonSelect'),
              type: 'inputText',
              isMul: true,
              isMust: true
            }
          ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'controlBtn1',
              label: '操作',
              minWidth: 180,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey1',
                  labelName: '详情',
                  component: () => import('@/components/org/linkButton'),
                  clickEvent: (index) => this.edit(index)
                }
              ]
            },
            {
              prop: 'saleOrderCode',
              label: '订单号'
            },
            {
              prop: 'saleOrder2',
              label: '类别'
            },
            {
              prop: 'saleOrderTime',
              label: '保养套餐/精品编码'
            },
            {
              prop: 'orderStatusName',
              label: '保养套餐/精品名称'
            },
            {
              prop: 'invoiceApplyStatusName',
              label: '使用次数/数量'
            },
            {
              prop: 'erpBookStatusName',
              label: '剩余次数/数量'
            },
            {
              prop: 'authDle',
              label: '有效期'
            },
            {
              prop: 'empName',
              label: '购车日期'
            }
          ],
      formField: {
        saleOrderCode: '',
        custName: '',
        custTel: '',
        invoiceApplyStatusId: '',
        vin: '',
        deliveryDlrId: '',
        empId: '',
        erpBookStatusId: '',
        signatoryName: '',
        signatoryPhone: '',
        invoiceDate: ''
      },
      // 是否使用刷新Key的方式刷新弹窗
      resetDialogKey: false
      // 单表格模版页面组件回调事件
    }
  },
  watch: {
    popupsVisible: {
      handler(newName, oldName) {
        if (newName) {
          this.$nextTick(() => {
            // debugger
            this.queryTable(1)
          })
        }
      }
    }
  },
  mounted() {
    // this.queryTable(1)
  },
  methods: {
    exportExcelAll() {
      exportExcel(
        this.formField,
        orgApis.orderinvoiceExport.APIUrl,
        orgApis.orderinvoiceExport.ServiceCode,
        '订单开票'
      )
    },
    save(val) {
      // this.closeinvoice()
    },
    edit(index, popstatus) {
      this.editPopupsVisible = true
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('update:popupsVisible', false)
      this.popupsVisible = type
      // this.$emit('close', false)
    }

  }
}
</script>
